<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识vue</title>
        <!--引入vue-->
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
           height: 50px;
           background-color: skyblue;
        }
    </style>
    
    <body>
        <div id="app">
            <!-- 1.Vue中常用的按键别名：
                   回车 =>enter
                   删除=>delete（捕获“删除”和"退格”键）
                   退出 => esc
                   空格=> space
                   换行 => tab
                   上=> up
                   下 => down
                   左=>left 
                   右 => right
                   -->

            <input type="text" placeholder="回车提示信息" @keyup.enter="showinfo"></input>
           
          </div>
        <script type="text/javascript">
            var app = new Vue({
                          el: '#app',
                          data: {
                                message: 'Hello Vue!1',
                                url:"http://baidu.com"
                         },
                         methods:{
                                showinfo(e) {
                                    console.log(e.target.value)
                                }
                            }
                        })
            

        </script>
    </body>
</html>